<template>
    <div>
        <h3>reactive定义页面响应式数据</h3>
        <p>用户姓名：{{ name }}</p>
        <p>学科姓名：{{ subject.name }}</p>
        <p>学科姓名：{{ data.sex }}</p>
        <p>学科姓名：{{ data.info.work }}</p>
        <button @click="changeInfo">修改响应式数据</button>
    </div>
</template>

<script>
// 引入定义响应式数据的api（reactive）
import { reactive, ref, isRef, isReactive } from "vue"
export default {
    setup(props, ctx) {

        let id = 11
        let age = ref(20)

        // 1.使用reactive定义响应式数据
        // 1.1基本类型(无效的)
        let name = reactive('李四')
        // 1.2引用类型
        let subject = reactive({ id: 1, name: "web" })

        let data = reactive({
            sex: "男",
            info: { work: "it" }
        })

        console.log(name)
        console.log(subject)
        // 修改数据  在页面使用的话不需要.value(模板会进行浅解析) 在js 需要.value  
        function changeInfo() {
            name = "张三"
            subject.name = "java"
            data.sex = "女"
        }

        console.log(isRef(id))//false
        console.log(isRef(age))//true
        console.log(isReactive(id))//false
        console.log(isReactive(name))//?false
        console.log(isReactive(subject))//true


        // 返回数据
        return {
            name,
            subject,
            data,
            changeInfo
        }
    }
};
</script>

<style scoped></style>
